# React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。

Properties 属性 #

Text 文本 #

属性名 取值 描述
color <color> 对应 CSS 中的 color 属性
fontFamily string 对应 CSS 中的 font-family 属性
fontSize <number> 对应 CSS 中的 font-size 属性
fontStyle normal, italic 对应 CSS 中的 font-style 属性，但阉割了 oblique 取值
fontWeight normal, bold 100~900 对应 CSS 中的 font-weight 属性，但阉割了 bolder, lighter 取值
lineHeight <number> 对应 CSS 中的 line-height 属性
textAlign auto, left, right, center, justifyiOS 对应 CSS 中的 text-align 属性，增加了 auto 取值
textAlignVerticalAndroid auto, top, bottom, center 对应 CSS 中的 vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值
textShadowColor <color> 对应 CSS 中的 text-shadow 属性中的颜色定义
textShadowOffset {
width: <number>,
height: <number>
}		 对应 CSS 中的 text-shadow 属性中的阴影偏移定义
textShadowRadius <number> 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
letterSpacingiOS <number> 对应 CSS 中的 letter-spacing 属性，但取值不同
textDecorationColoriOS <color> 对应 CSS 中的 text-decoration-color 属性
textDecorationLineiOS none, underline, line-through, underline line-through 对应 CSS 中的 text-decoration-line 属性，但阉割了 overline, blink 取值
textDecorationStyleiOS solid, double, dotted, dashed 对应 CSS 中的 text-decoration-style 属性，但阉割了 wavy 取值
writingDirectioniOS auto, ltr, rtl 对应 CSS 中的 direction 属性，增加了 auto 取值

Dimension 尺寸 #

属性名 取值 描述
width <number> 对应 CSS 中的 width 属性
height <number> 对应 CSS 中的 height 属性

Positioning 定位 #

属性名 取值 描述
position absolute, relative 对应 CSS 中的 position 属性，但阉割了 static, fixed 取值
top <number> 对应 CSS 中的 top 属性
right <number> 对应 CSS 中的 right 属性
bottom <number> 对应 CSS 中的 bottom 属性
left <number> 对应 CSS 中的 left 属性

Margin 外部白 #

属性名 取值 描述
margin <number> 对应 CSS 中的 margin 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的外补白
marginHorizontal <number> CSS中没有对应的属性，相当于同时设置marginRight和marginLeft
marginVertical <number> CSS中没有对应的属性，相当于同时设置marginTop和marginBottom
marginTop <number> 对应 CSS 中的 margin-top 属性
marginRight <number> 对应 CSS 中的 margin-right 属性
marginBottom <number> 对应 CSS 中的 margin-bottom 属性
marginLeft <number> 对应 CSS 中的 margin-left 属性

Padding 内部白 #

属性名 取值 描述
padding <number> 对应 CSS 中的 padding 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的内补白
paddingHorizontal <number> CSS中没有对应的属性，相当于同时设置paddingRight和paddingLeft
paddingVertical <number> CSS中没有对应的属性，相当于同时设置paddingTop和paddingBottom
paddingTop <number> 对应 CSS 中的 padding-top 属性
paddingRight <number> 对应 CSS 中的 padding-right 属性
paddingBottom <number> 对应 CSS 中的 padding-bottom 属性
paddingLeft <number> 对应 CSS 中的 padding-left 属性

Border 边框 #

属性名 取值 描述
borderStyle solid, dotted, dashed 对应 CSS 中的 border-style 属性，但阉割了 none, hidden, double, groove, ridge, inset, outset 取值，且无方向分拆属性
borderWidth <number> 对应 CSS 中的 border-width 属性
borderTopWidth <number> 对应 CSS 中的 border-top-width 属性
borderRightWidth <number> 对应 CSS 中的 border-right-width 属性
borderBottomWidth <number> 对应 CSS 中的 border-bottom-width 属性
borderLeftWidth <number> 对应 CSS 中的 border-left-width 属性
borderColor <color> 对应 CSS 中的 border-color 属性
borderTopColor <color> 对应 CSS 中的 border-top-color 属性
borderRightColor <color> 对应 CSS 中的 border-right-color 属性
borderBottomColor <color> 对应 CSS 中的 border-bottom-color 属性
borderLeftColor <color> 对应 CSS 中的 border-left-color 属性
borderRadius <number> 对应 CSS 中的 border-radius 属性
borderTopLeftRadius <number> 对应 CSS 中的 border-top-left-radius 属性
borderTopRightRadius <number> 对应 CSS 中的 border-top-right-radius 属性
borderBottomLeftRadius <number> 对应 CSS 中的 border-bottom-left-radius 属性
borderBottomRightRadius <number> 对应 CSS 中的 border-bottom-right-radius 属性
shadowColor <color> 对应 CSS 中的 box-shadow 属性中的颜色定义
shadowOffset {
width: <number>,
height: <number>
}		 对应 CSS 中的 box-shadow 属性中的阴影偏移定义
shadowRadius <number> 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
shadowOpacity <number> 对应 CSS 中的 box-shadow 属性中的阴影透明度定义

Background 背景 #

属性名 取值 描述
backgroundColor <color> 对应 CSS 中的 background-color 属性

Transform 转换 #

属性名 取值 描述
transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] 对应 CSS 中的 transform 属性
transformMatrix TransformMatrixPropType 类似于 CSS 中 transform 属性的 matrix() 和 matrix3d() 函数
backfaceVisibility visible, hidden 对应 CSS 中的 backface-visibility 属性

Flexbox 弹性盒 #

属性名 取值 描述
flex <number> 对应 CSS 中的 flex 属性
flexDirection row, column 对应 CSS 中的 flex-direction 属性，但阉割了 row-reverse, column-reverse 取值
flexWrap wrap, nowrap 对应 CSS 中的 flex-wrap 属性，但阉割了 wrap-reverse 取值
justifyContent flex-start, flex-end, center, space-between, space-around 对应 CSS 中的 justify-content 属性，但阉割了 stretch 取值。
alignItems flex-start, flex-end, center, stretch 对应 CSS 中的 align-items 属性，但阉割了 baseline 取值。
alignSelf auto, flex-start, flex-end, center, stretch 对应 CSS 中的 align-self 属性，但阉割了 baseline 取值

Other 其他 #

属性名 取值 描述
opacity <number> 对应 CSS 中的 opacity 属性
overflow visible, hidden 对应 CSS 中的 overflow 属性，但阉割了 scroll, auto 取值
elevationAndroid <number> CSS中没有对应的属性，只在 Android5.0+ 上有效
resizeMode cover, contain, stretch CSS中没有对应的属性，可以参考 background-size 属性
overlayColorAndroid string CSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColoriOS <color> CSS中没有对应的属性，iOS 图像上特殊的色彩，改变不透明像素的颜色

Valuse 取值 #

Color 颜色 #

React-Native 支持了 CSS 中大部分的颜色类型：

Number 数值 #

在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位，详细请看 Units 单位 部分。

Units 单位 #

Pt 点 #

在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位，例如：

<View style={{width: 100, height: 50}}></View>

var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

未完待续。。。

Created by ShenBao